<template>
  <div class="company-block">
    <el-row>
      <el-col :span="12" class="left">
        <div class="detail-wrap">
          <img class="avatar" :src="company.logo_img"/>
          <div class="content">
            <div class="title-wrap">
              <router-link tag="b" :to="'/company/' + company.id" class="title">{{company.company_name}}</router-link>
              <span
                v-if="company.is_certification === 1"
                class="guarantee"
                :style="{background: `url('${$baseImgUrl}company/guarantee_icon.png')
              no-repeat`, backgroundSize: '100%'}"
              />
              <span
                v-if="company.is_guarantee === 1"
                class="certification"
                :style="{background: `url('${$baseImgUrl}company/certification_icon.png')
              no-repeat`, backgroundSize: '100%'}"
              />
            </div>
            <p class="plat-wrap">
              平台：
              <span
                v-for="(plat, index) in company.plats"
                :key="index"
              >
                {{plat}}
              </span>
            </p>
            <p>保障：海博认证担保500万</p>
            <div class="rate">
              <div>综合得分：</div>
              <div>
                <rate
                  :rate="9.3"
                  :perRate="2"
                  rateTemplate="value分"
                ></rate>
              </div>
            </div>
          </div>
        </div>
        <div class="index-wrap">
          <el-row>
            <el-col :span="12">
              <company-index name="网站指数" :score="9.7" activeBarColor="#03d4a5"></company-index>
            </el-col>
            <el-col :span="12">
              <company-index name="网站指数" :score="9.7" activeBarColor="#03d4a5"></company-index>
            </el-col>
            <el-col :span="12">
              <company-index name="网站指数" :score="9.7" activeBarColor="#03d4a5"></company-index>
            </el-col>
            <el-col :span="12">
              <company-index name="网站指数" :score="9.7" activeBarColor="#03d4a5"></company-index>
            </el-col>
            <el-col :span="12">
              <company-index name="网站指数" :score="9.7" activeBarColor="#03d4a5"></company-index>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="12" class="right">
        <el-tabs
          type="border-card"
          :stretch="true"
        >
          <el-tab-pane label="公司简介" class="introduction">
            <el-row>
              <el-col :span="15" class="description">
                <div class="content">
                  {{company.introduction}}
                </div>
                <span class="detail">查看详细>></span>
              </el-col>
              <el-col :span="9" class="img">
                <img :src="company.logo_img"/>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="基本信息"></el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import CompanyIndex from './Index.vue';
import Rate from '../../../components/Rate.vue';

export default {
  name: 'CompanyBlock',
  props: {
    company: {
      type: Object,
      default() {
        return {
          img: '',
          title: '',
          isGuarantee: true,
          isCertification: true,
          plats: ['AG', 'MG', 'EA', 'BBIN', '沙巴', 'HG', 'TTG'],
          security: '',
          synthesisScore: 3.6
        };
      }
    }
  },
  data() {
    return {};
  },
  components: {
    CompanyIndex,
    Rate
  }
};
</script>

<style lang="less" scoped>
  @import '../../../less/global.less';
  .company-block {
    margin-bottom: 10px;
    border: 1px solid #ddd;
    background-color: #fff;
    .left {
      padding: 15px;
      border-right: 1px solid #ddd;
      .detail-wrap {
        display: flex;
        .avatar {
          flex: 0 0 120px;
          width: 120px;
          height: 120px;
        }
        .content {
          margin-left: 20px;
          .title-wrap {
            * {
              vertical-align: middle;
            }
            .title {
              margin-right: 10px;
              font-size: 18px;
              font-weight: bold;
              color: #333;
              cursor: pointer;
            }
            span {
              display: inline-block;
              margin-right: 10px;
              width: 20px;
              height: 20px;
            }
          }
          p {
            line-height: 30px;
            color: #666;
          }
          .rate {
            display: flex;
            align-items: center;
            color: #666;
          }
        }
      }
      .index-wrap {
        margin-top: 20px;
      }
    }
    .right {
      .tab-pane-wrap {
        height: 177px;
      }
      .introduction {
        .description {
          color: #666;
          .content {
            margin-bottom: 6px;
            line-height: 20px;
            max-height: 157px;
            overflow: hidden;
          }
          .detail {
            cursor: pointer;
            color: @mainBgColor;
            &:hover {
              color: @mainBgHoverColor;
            }
          }
        }
        img {
          width: 100%;
        }
      }
    }
  }
  .company-block /deep/ .el-tabs--border-card {
    border: 0;
    box-shadow: none;
  }
</style>
